<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-coordinate"></i> 项目审核</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-if="!showInfo">
            <el-tabs v-model="message" @tab-click="handleClick">
                <el-tab-pane v-for="item in list" :key="item.id" :label="item.step" :name="String(item.id)" style="font-size: 20px">
                    <!-- 表格 -->
                    <el-table
                        v-if="tableList.length > 0 ? tableList : '暂无数据'"
                        :data="tableList"
                        border
                        style="width: 100%; font-size: 15px"
                    >
                        <el-table-column prop="name" label="项目名称"></el-table-column>
                        <el-table-column prop="sqsj" label="申请时间"></el-table-column>
                        <el-table-column prop="statemc" label="状态"></el-table-column>
                        <el-table-column prop="xmbm" label="项目编码"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" icon="el-icon-view" type="success" @click="handleLook(scope.row, 'tabs', item.id)"
                                    >查看</el-button
                                >
                                <el-button
                                    v-if="item.id == '4'"
                                    size="mini"
                                    icon="el-icon-download"
                                    type="warning"
                                    @click="handleDown(scope.row, 'tabs', item.id)"
                                    >下载</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableList.length"
                    >
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 查看页 -->
        <div class="container" style="padding-top: 10px" v-if="showInfo">
            <!-- 返回按钮 -->
            <el-button type="warning" @click="goBack">
                <i class="el-icon-back" />
                <span> 返回列表页</span>
            </el-button>

            <!-- 步骤条 -->
            <div style="width: 70%; margin-bottom: 10px">
                <div style="width:80%;position: relative;border-top: 4px solid #ccc;left:110px;top: 57px;z-index: 10;"></div>
                <ul class="flow">
                    <li v-for="(item, index) in stepList" :key="index" :class="{ flowActive: isVerify == index + 1 }">
                        {{ item }}
                    </li>
                </ul>
            </div>
            <!-- 分割线 -->
            <el-divider v-if="showSpecialist" />
            <!-- 项目信息 -->
            <div v-if="showSpecialist == false">
                <el-tabs v-if="update" tab-position="left" type="border-card" style="margin-bottom: 20px">
                    <el-tab-pane v-for="(item, index) in titleData" :key="index" :label="item.name">
                        <!-- <keep-alive> -->
                        <component :is="item.sub" :stateShow="true" :tabRow="row"></component>
                        <!-- </keep-alive> -->
                    </el-tab-pane>
                </el-tabs>
                <!-- 审核内容 -->
                <Forms :data="data" @handleClick="handleClick" @nextStepIndex="nextStep" @specialist="specialist" :row="row"></Forms>
            </div>
            <!-- 专家列表 -->
            <Specialist v-else @back="showSpecialist = false"></Specialist>
        </div>
    </div>
</template>

<script>
import Basic from './components/Basic.vue';
import Digest from './components/Digest.vue';
// import Institution from './components/Institution.vue';
import Datum from './components/Datum.vue';
import Forms from '@/views/backStage/Tabs/Forms';
import Specialist from '@/views/backStage/Tabs/components/Specialist.vue';
import { getTabListAPI, getUserTabListAPI, getTabListDetailsAPI, getSpeciaListAPI, getProjectDownAPI } from '@/api/backStage.js';
export default {
    name: 'tabs',
    components: {
        Basic,
        Digest,
        Datum,
        Forms,
        Specialist
    },
    data() {
        return {
            currentPage: 1, //初始页
            pagesize: 10, // 每页的数据
            update: true,
            data: {}, // 项目信息
            message: '1', // 当前选中tab标签
            isVerify: null, // 审核状态
            showInfo: false, // 是否显示详细信息页
            showSpecialist: false, // 显示专家列表
            showData: [],
            row: {},
            stepList: ['初审', '中审', '专家审核', '立项', '伦理审核'], // 步骤列表
            list: [
                { id: '1', step: '初审' },
                { id: '2', step: '中审' },
                { id: '3', step: '专家审核' },
                { id: '4', step: '立项' },
                { id: '5', step: '伦理审核' }
            ],
            tableList: [], // 表格信息
            titleData: [
                { name: '基本信息', sub: 'Basic' },
                { name: '方案摘要', sub: 'Digest' },
                // { name: '机构信息', sub: 'Institution' },
                { name: '项目资料', sub: 'Datum' }
            ]
        };
    },
    mounted() {
        if (this.isVerify == 2) {
            this.titleData.push({ name: '专家列表', sub: 'Specialist' });
        }
        if (this.isVerify == 3) {
            this.titleData.pop();
            this.update = false;
            this.$nextTick(() => {
                this.update = true;
            });
        }
        this.handleClick({ token: this.$store.state.user.token, name: 1 });
        // this.getUserTabListAPI()
    },
    watch: {
        showInfo: function(newVal) {
            if (newVal && this.isVerify != 2) {
                this.titleData = [
                    { name: '基本信息', sub: 'Basic' },
                    { name: '方案摘要', sub: 'Digest' },
                    // { name: '机构信息', sub: 'Institution' },
                    { name: '项目资料', sub: 'Datum' }
                ];
            }
        }
    },
    methods: {
        // 获取项目审核的列表
        async handleClick(tab, event) {
            const res = await getTabListAPI({ token: this.$store.state.user.token, xmzt: tab.name });
            if (res.code == 'succ' && res.result != null) {
                this.tableList = res.result;
            } else {
                this.tableList = [];
            }
        },
        async specialist() {
            this.showSpecialist = true;
            const zjListres = await getSpeciaListAPI({
                token: this.$store.state.user.token,
                xmid: localStorage.getItem('changeXmid')
            });
            if (zjListres.code == 'succ') {
                this.haveSpecialistList = zjListres.result;
                this.$message.success(zjListres.message);
            } else {
                // this.$message.error(zjListres.message);
            }
        },
        // 根据申请人获取项目审核列表
        // async getUserTabListAPI(){
        //   const res = await getUserTabListAPI({
        //     token:this.$store.state.user.token,
        //     oprid:this.$store.state.user.userInfo[0].XM
        //   })
        // },
        // 查看
        async handleLook(obj, flag, name) {
            // console.log(this.showInfo);
            this.row = obj;
            // // this.ZJrow = obj;
            localStorage.setItem('changeXmid', obj.xmid);
            this.name = name;
            this.$store.dispatch('applyFor/changeListFlag', flag);
            this.data = obj;
            this.isVerify = obj.state;
            if (this.isVerify == 2 && this.titleData.length <= 4) {
                this.titleData.push({ name: '专家列表', sub: 'Specialist' });
                const zjListres = await getSpeciaListAPI({
                    token: this.$store.state.user.token,
                    xmid: localStorage.getItem('changeXmid')
                });
                if (zjListres.code == 'succ') {
                    this.haveSpecialistList = zjListres.result;
                    this.$message.success(zjListres.message);
                } else {
                    this.$message.error(zjListres.message);
                }
            }

            const res = await getTabListDetailsAPI({ token: this.$store.state.user.token, xmid: obj.xmid });
            this.$store.dispatch('applyFor/FunAaa', res.result[0]);
            this.showInfo = true; // 显示审核页
            console.log(this.showInfo);
        },
        // 下载
        async handleDown(row) {
            let res = await getProjectDownAPI({
                token: this.$store.state.user.token,
                xmid: row.xmid
            });
            if (res.code == 'succ') {
                this.$message.success(res.message);
                const ele = document.createElement('a');
                ele.setAttribute('href', res.result.fullURL);
                // element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(res.result));
                const str = res.result.fullURL.substring(res.result.fullURL);
                ele.setAttribute('download', str);
                ele.click();
            }
        },
        // 返回列表页
        goBack() {
            this.showInfo = false;
            this.showSpecialist = false;
            let obj = {
                name: this.name
            };
            this.handleClick(obj);
        },
        lastStep(i) {
            this.isVerify = i;
            if (this.isVerify == 2) {
                this.titleData.push({ name: '专家列表', sub: 'Specialist' });
            }
            if (this.isVerify == 1) {
                this.titleData.pop();
            }
            if (this.isVerify == 1 || this.isVerify == 3) {
                this.update = false;
                this.$nextTick(() => {
                    this.update = true;
                });
            }
        },
        async nextStep(i) {
            // if (this.state) {
            this.isVerify = i;
            // }
            if (this.isVerify == 2) {
                this.titleData.push({ name: '专家列表', sub: 'Specialist' });
                const zjListres = await getSpeciaListAPI({
                    token: this.$store.state.user.token,
                    xmid: localStorage.getItem('changeXmid')
                });
                if (zjListres.code == 'succ') {
                    this.haveSpecialistList = zjListres.result;
                    this.$message.success(zjListres.message);
                } else {
                    // this.$message.error(zjListres.message);
                }
            }
            if (this.isVerify == 3) {
                this.titleData.pop();
                this.update = false;
                this.$nextTick(() => {
                    this.update = true;
                });
            }
        },
        // 分页
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function(size) {
            this.pagesize = size;
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
        }
    }
};
</script>

<style scoped>
::v-deep .el-tabs__item {
    font-size: 17px;
    height: 50px;
    line-height: 50px;
    font-weight: 700;
}
::v-deep .el-icon-arrow-left:before,
::v-deep .el-icon-arrow-right:before {
    content: '';
}
::v-deep .el-tabs--border-card {
    border: none;
    box-shadow: none;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    color: #222;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 0;
}
</style>
<style>
.message-title {
    cursor: pointer;
}
.handle-row {
    margin-top: 30px;
}
.el-tabs__item {
    font-size: 18px;
}
.flow {
    list-style-type: none;
    display: flex;
    text-align: center;
    justify-content: space-around;
}
.flow li {
    width: 68px;
    height: 68px;
    font-weight: 700;
    border: 1px solid #409eff;
    line-height: 68px;
    margin: 20px 15px 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 20;
    background-color: #fff;
}
.flowActive {
    background-color: #409eff !important;
    color: #fff;
}
</style>
